import { Canvas, Meta, Story, Source } from '@storybook/blocks';
import { primaryButtonDocs, secondaryButtonDocs, warnButtonDocs } from './button.utils';
import * as ButtonStories from './button.stories';

<Meta title="Atoms/Button/Overview" />

# Atoms button overview

## Description

Buttons are used to trigger actions. They are used in forms, dialogs, and more.

## Variants

### Primary

<Canvas>
  <Story of={ButtonStories.Primary}></Story>
</Canvas>

### Secondary

<Canvas>
  <Story of={ButtonStories.Secondary}></Story>
</Canvas>

### Warn

<Canvas>
  <Story of={ButtonStories.Warn}></Story>
</Canvas>

## States

<br />

### Default

<Canvas>
  <Story of={ButtonStories.Primary}></Story>
  <Story of={ButtonStories.Secondary}></Story>
  <Story of={ButtonStories.Warn}></Story>
</Canvas>

### Hover

<Canvas>
  <Story of={ButtonStories.PrimaryHover}></Story>
  <Story of={ButtonStories.SecondaryHover}></Story>
  <Story of={ButtonStories.WarnHover}></Story>
</Canvas>

### Focus

<Canvas>
  <Story of={ButtonStories.PrimaryHover}></Story>
  <Story of={ButtonStories.SecondaryFocus}></Story>
  <Story of={ButtonStories.WarnFocus}></Story>
</Canvas>

## Code

<br />

### Primary

<Source {...primaryButtonDocs.docs.source} />

### Secondary

<Source {...secondaryButtonDocs.docs.source} />

### Warn

<Source {...warnButtonDocs.docs.source} />

## Use cases

> This component is used in the following stories:

### Molecules

### Organisms

### Templates

### Pages
